<template>
	<view>
		<view class="top" :style="{marginTop:height}">

		</view>
		<view class="con" :style="{paddingBottom:bheight}">
			<u-swiper :list="list1" height="326.34rpx" radius='38rpx' bgColor="#D3D0D0"></u-swiper>
			<view class="con__box">
				<view class="" style="padding: 30rpx 38rpx 11rpx;">
					<view class="con__box__tab">
						<view class="con__box__tab__item" v-for="(item,index) in tablist" :key="index"
							:class="curindex==index?'active':''" @click="getlist(tablist[index].key),curindex=index">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="con__box__tip">
					<view class="con__box__tip__dian">

					</view>
					学校、专业热度人气值由点击率、搜索量、收藏量综合得出
				</view>
				<view class="list">
					<view class="list__top u-flex u-flex-y-center">
						<view class="list__l">
							排名
						</view>
						<view class="list__c">
							学校名
						</view>
						<view class="list__r">
							<view class="" style="width: fit-content;margin-left: 24rpx;">
								人气值
							</view>
						</view>
					</view>
					<view class="list__item" v-for="(item,index) in list" :key="index" @click="clickto(item)">
						<image src="/static/hot/Rectangle 95.png" v-if="index==0" class="list__item__bg" mode="">
						</image>
						<image src="/static/hot/Rectangle 96.png" v-if="index==1" class="list__item__bg" mode="">
						</image>
						<image src="/static/hot/Rectangle 97.png" v-if="index==2" class="list__item__bg" mode="">
						</image>
						<view class="list__l list__item__index">
							{{index+1}}
						</view>
						<view class="list__c list__item__name">
							{{item.title}}
						</view>
						<view class="list__r u-flex u-flex-y-center" style="position: relative;">
							<image src="/static/hot/huo.png" class="list__item__huo" mode=""></image>
							<view class="list__item__num">
								{{item.popularity}}
							</view>
							<image src="/static/hot/Vector.png" class="list__item__more" mode=""></image>
						</view>

					</view>
				</view>
			</view>

		</view>
		<view class="" :style="{height:bheight}" style="position: fixed;bottom:0;background-color: #fff;">

		</view>
	</view>
</template>

<script>
	import school from '@/api/_school.js'
	import home from '@/api/_home.js'
	export default {
		data() {
			return {
				list1: [],
				tablist: [{
						name: '学校热度',
						key: 'schoollist'
					},
					{
						name: '专业热度',
						key: 'majorlist'
					},
				],
				curindex: 0,
				list: [],
				type:'schoollist'
			};
		},
		computed: {
			height() {
				const height = `calc(${uni.$u.addUnit(uni.$u.sys().statusBarHeight, 'px')})`
				return uni.$u.deepMerge(height)
			},
			bheight() {
				const height = uni.$u.addUnit(uni.$u.sys().safeAreaInsets.bottom, 'px');
				return uni.$u.deepMerge(height)
			},
		},
		methods: {
			async getlist(type) {
				this.type=type
				if (type == 'schoollist') {
					let res = await school.schoollist({
						page: 1,
						page_size: 10
					})
					// console.log(res)
					if (res.data.code == 200) {
						this.list = res.data.data.data
					}
				} else {
					let res = await school.majorlist({
						page: 1,
						page_size: 10
					})
					if (res.data.code == 200) {
						this.list = res.data.data.data
					}
				}

			},
			clickto(item){
				if(this.type=='schoollist'){
					this.navto('/pages/cschool/detail?id='+item.id)
				}else{
					// pages/xzy/detail
					this.navto('/pages/xzy/detail?id='+item.id)
				}
			},
			async getbanner(){
				let res = await home.config({name:'siteDegree'})
				if(res.data.code==200){
					this.list1=res.data.data.siteDegree
				}
			}
		},
		onLoad(o) {
			this.type=o.type
			this.curindex=o.curindex
			this.getlist(o.type)
			this.getbanner()
		}
	}
</script>

<style lang="scss">
	page {
		background: url('https://mp-b54a63ff-3ce2-4df8-8d6e-f855d8976d34.cdn.bspapp.com/img/Rectangle_106.png') 100% no-repeat;
		background-position: top;
		width: 750rpx;
	}

	.top {
		padding-top: 87rpx;
	}

	.con {
		padding: 0 24rpx;

		&__box {
			background: #FFFFFF;
			box-shadow: 0rpx 2rpx 8rpx 0rpx #ACCCC5;
			border-radius: 57rpx 57rpx 57rpx 57rpx;
			margin-top: 15rpx;

			&__tab {

				height: 76rpx;
				background: rgba(231, 239, 248, 0.5);
				display: flex;
				align-items: center;
				border-radius: 46rpx 46rpx 46rpx 46rpx;

				&__item {
					width: 50%;
					height: 76rpx;
					border-radius: 57rpx 57rpx 57rpx 57rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 31rpx;
					color: #618395;
					line-height: 61rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}

				.active {
					background: #82e6f8;
					color: #00456A;
				}
			}

			&__tip {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 19rpx;
				color: #8A8A8A;
				line-height: 61rpx;
				display: flex;
				align-items: center;
				padding-left: 82rpx;
				margin-bottom: 9.5rpx;

				&__dian {
					width: 23rpx;
					height: 23rpx;
					background: #D9D9D9;
					border-radius: 50%;
					margin-right: 6rpx;
				}
			}
		}
	}

	.list {
		&__top {
			height: 76rpx;
			background: #e6f5fc;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 27rpx;
			color: #3D3D3D;
			line-height: 76rpx;
			text-align: center;
		}

		&__l {
			width: 20%;
		}

		&__c {
			width: 48%;
		}

		&__r {
			width: 32%;
		}

		&__item {
			position: relative;
			height: 76rpx;
			display: flex;
			align-items: center;

			&__bg {
				width: 700rpx;
				height: 76rpx;
				position: absolute;
				top: 0;
				left: 0;
			}

			&__index {
				line-height: 76rpx;
				font-family: Alegreya;
				font-weight: 500;
				font-size: 46rpx;
				color: #747474;
				text-align: center;
				position: relative;
			}

			.index0 {
				color: #E18B2B;
			}

			.index1 {
				color: #4D7D8F;
			}

			.index2 {
				color: #C89745;
			}

			&__name {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 31rpx;
				color: #000000;
				line-height: 76rpx;
				position: relative;
			}

			&__num {
				font-family: Microsoft YaHei, Microsoft YaHei;
				font-weight: 400;
				font-size: 31rpx;
				color: #757575;
				line-height: 76rpx;
				flex: 1;
			}

			&__huo {
				width: 20.99rpx;
				height: 25.82rpx;
				margin-right: 14rpx;

			}

			&__more {
				width: 13.88rpx;
				height: 24.01rpx;
				margin-right: 34rpx;
			}
		}

	}
</style>